<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            margin: 100px auto;
            width: 300px;
            height: 400px;
        }
        
        .text {
            clear: both;
            box-sizing: border-box;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
        
        .box {
            float: left;
            width: 10px;
            height: 10px;
            background: red;
            /* border: 1px solid red; */
        }
    </style>
</head>

<body>
    <div id="container">
        <button class="start">开始</button>
        <button class="stop">停止</button>
        <div class="text"></div>
    </div>

    <script>
        /*     任务要求：
                                                    （1）在对象下的两个方法start和stop中
                                                    （2）第一个方法start，设置“开始”按钮点击事件，
                                                    开启定时器，每隔一秒，向div元素中追加内容。
                                                    （3）第二个方法stop，设置“停止”按钮点击事件，
                                                    清除定时器。
                                                    （4）调用对象下的这两个方法。
                                                    提示：箭头函数 保留了  定时器的父级的this指向 */
        //   获取元素
        // 开始按钮
        let Ostart = document.querySelector(".start");
        // 停止按钮
        let Ostop = document.querySelector(".stop");
        console.log(Ostop);
        var timer = null;
        // 重复次数
        var num = 1;
        var obj = {

            // 开始的方法
            start: () => {
                //闭包
                return () => {
                    // 先清除定时器
                    clearInterval(timer);

                    timer = setInterval(() => {
                        // 元素的内容
                        var content = repeat_str('<div class="box"></div>', num);
                        // 拼接字符串
                        var str = `<div class="text"> ${content }<div>`;
                        // var str = '<div class="text">' + content + '<div>';
                        console.log(str);
                        document.querySelector('.text').innerHTML = str;
                        // 每一秒钟重复次数加一
                        num++;
                    }, 1000);

                }
            },


            // 停止的方法

            stop: () => {
                return () => {
                    clearInterval(timer);
                }
            }
        }

        Ostart.onclick = obj.start();
        Ostop.onclick = obj.stop();
        // 复制字符串函数   
        // 参数 str：字符串 num: 重复的次数
        var repeat_str = (str, num) => num > 1 ? str.repeat(num) : str;
        // function repeat_str(str, num) {
        //     // repeat(n) 重复  参数为重复的次数
        //   
        // }
    </script>
</body>

</html>